<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
	getPublicIp,
	getIpInfo,
	type IpInfo
} from './public-ip-checker.service';

const ipInfo = ref<IpInfo | null>(null);
const loading = ref(false);
const error = ref<string | null>(null);
const customIp = ref('');
const customIpInfo = ref<IpInfo | null>(null);
const customLoading = ref(false);
const activeTab = ref<'public' | 'custom'>('public');

const fetchPublicIp = async () => {
	loading.value = true;
	error.value = null;

	try {
		const result = await getPublicIp();
		if (result) {
			ipInfo.value = result;
		} else {
			error.value = '无法获取公网IP地址，请检查网络连接';
		}
	} catch (err) {
		error.value = '获取公网IP地址时发生错误';
		console.error('Error fetching public IP:', err);
	} finally {
		loading.value = false;
	}
};

const fetchCustomIpInfo = async () => {
	if (!customIp.value.trim()) return;

	customLoading.value = true;
	customIpInfo.value = null;

	try {
		const result = await getIpInfo(customIp.value.trim());
		if (result) {
			customIpInfo.value = result;
		} else {
			error.value = '无法获取该IP地址的信息';
		}
	} catch (err) {
		error.value = '获取IP信息时发生错误';
		console.error('Error fetching IP info:', err);
	} finally {
		customLoading.value = false;
	}
};

const copyIp = async () => {
	if (ipInfo.value?.ip) {
		await navigator.clipboard.writeText(ipInfo.value.ip);
	}
};

const copyCustomIp = async () => {
	if (customIpInfo.value?.ip) {
		await navigator.clipboard.writeText(customIpInfo.value.ip);
	}
};

const formatLocation = (info: IpInfo) => {
	const parts = [];
	if (info.city) parts.push(info.city);
	if (info.region) parts.push(info.region);
	if (info.country) parts.push(info.country);
	return parts.join(', ') || '未知位置';
};

onMounted(() => {
	fetchPublicIp();
});
</script>

<template>
	<c-card>
		<!-- 标签页导航 -->
		<div mb-6>
			<div flex gap-1 bg-gray-100 p-1 rounded-lg>
				<button
					@click="activeTab = 'public'"
					:class="[
						'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all',
						activeTab === 'public'
							? 'bg-white text-blue-600 shadow-sm'
							: 'text-gray-600 hover:text-gray-800'
					]">
					<div flex items-center justify-center gap-2>
						<span>🌐</span>
						<span>本机公网IP</span>
					</div>
				</button>
				<button
					@click="activeTab = 'custom'"
					:class="[
						'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all',
						activeTab === 'custom'
							? 'bg-white text-blue-600 shadow-sm'
							: 'text-gray-600 hover:text-gray-800'
					]">
					<div flex items-center justify-center gap-2>
						<span>🔍</span>
						<span>查询IP归属</span>
					</div>
				</button>
			</div>
		</div>

		<!-- 本机公网IP标签页 -->
		<div v-if="activeTab === 'public'">
			<div flex items-center justify-between mb-6>
				<div>
					<h3 text-xl font-bold text-gray-800>本机公网IP</h3>
					<p text-sm text-gray-500 mt-1>
						获取您当前的公网IP地址和详细信息
					</p>
				</div>
				<c-button
					size="small"
					@click="fetchPublicIp"
					:loading="loading"
					type="primary">
					刷新
				</c-button>
			</div>

			<div v-if="loading" flex items-center justify-center py-12>
				<n-spin size="large" />
			</div>

			<div
				v-else-if="error"
				bg-red-50
				border
				border-red-200
				rounded-lg
				p-4>
				<div flex items-center gap-2>
					<div
						w-5
						h-5
						bg-red-500
						rounded-full
						flex
						items-center
						justify-center>
						<span text-white text-xs>!</span>
					</div>
					<span text-red-700>{{ error }}</span>
				</div>
			</div>

			<div v-else-if="ipInfo" space-y-6>
				<!-- IP地址卡片 -->
				<div
					bg-gradient-to-br
					from-blue-500
					to-indigo-600
					rounded-xl
					p-4
					text-white
					shadow-lg>
					<div flex items-center justify-between>
						<div>
							<div text-2xl font-bold font-mono mb-1>
								{{ ipInfo.ip }}
							</div>
							<div text-blue-100 text-sm>您的公网IP地址</div>
						</div>
						<c-button
							size="small"
							@click="copyIp"
							type="primary"
							ghost
							class="!bg-white !text-blue-600 hover:!bg-blue-50">
							复制IP
						</c-button>
					</div>
				</div>

				<!-- 地理位置卡片 -->
				<div
					v-if="ipInfo.city || ipInfo.region || ipInfo.country"
					bg-gradient-to-br
					from-purple-500
					to-pink-500
					rounded-xl
					p-4
					text-white
					shadow-lg>
					<div flex items-center justify-between>
						<div>
							<div text-xl font-bold mb-1>
								📍 {{ formatLocation(ipInfo) }}
							</div>
							<div text-purple-100 text-sm>地理位置信息</div>
						</div>
					</div>
				</div>

				<!-- 详细信息卡片 -->
				<div bg-white border border-gray-200 rounded-xl p-6 shadow-sm>
					<h4 text-lg font-semibold text-gray-800 mb-4>详细信息</h4>

					<div space-y-4>
						<!-- 基础信息 -->
						<div
							v-if="
								ipInfo.country || ipInfo.region || ipInfo.city
							">
							<div text-sm font-medium text-gray-600 mb-2>
								📍 基础信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="ipInfo.country"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>国家/地区</div>
									<div text-sm font-medium>
										{{ ipInfo.country }}
									</div>
								</div>
								<div
									v-if="ipInfo.region"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>省份/州</div>
									<div text-sm font-medium>
										{{ ipInfo.region }}
									</div>
								</div>
								<div
									v-if="ipInfo.city"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>城市</div>
									<div text-sm font-medium>
										{{ ipInfo.city }}
									</div>
								</div>
								<div
									v-if="ipInfo.postal"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>邮编</div>
									<div text-sm font-medium>
										{{ ipInfo.postal }}
									</div>
								</div>
							</div>
						</div>

						<!-- 网络信息 -->
						<div v-if="ipInfo.isp || ipInfo.org || ipInfo.asn">
							<div text-sm font-medium text-gray-600 mb-2>
								🌐 网络信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="ipInfo.isp"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>运营商</div>
									<div text-sm font-medium text-blue-800>
										{{ ipInfo.isp }}
									</div>
								</div>
								<div
									v-if="ipInfo.org"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>组织</div>
									<div text-sm font-medium text-blue-800>
										{{ ipInfo.org }}
									</div>
								</div>
								<div
									v-if="ipInfo.asn"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>ASN</div>
									<div text-sm font-medium text-blue-800>
										{{ ipInfo.asn }}
									</div>
								</div>
							</div>
						</div>

						<!-- 技术信息 -->
						<div v-if="ipInfo.network || ipInfo.version">
							<div text-sm font-medium text-gray-600 mb-2>
								⚙️ 技术信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="ipInfo.network"
									bg-green-50
									p-3
									rounded-lg>
									<div text-xs text-green-600>网络段</div>
									<div
										text-sm
										font-medium
										text-green-800
										font-mono>
										{{ ipInfo.network }}
									</div>
								</div>
								<div
									v-if="ipInfo.version"
									bg-green-50
									p-3
									rounded-lg>
									<div text-xs text-green-600>IP版本</div>
									<div text-sm font-medium text-green-800>
										{{ ipInfo.version }}
									</div>
								</div>
							</div>
						</div>

						<!-- 地理坐标 -->
						<div v-if="ipInfo.latitude && ipInfo.longitude">
							<div text-sm font-medium text-gray-600 mb-2>
								🗺️ 地理坐标
							</div>
							<div bg-orange-50 p-3 rounded-lg>
								<div text-xs text-orange-600>坐标</div>
								<div
									text-sm
									font-medium
									text-orange-800
									font-mono>
									{{ ipInfo.latitude.toFixed(4) }},
									{{ ipInfo.longitude.toFixed(4) }}
								</div>
							</div>
						</div>

						<!-- 时区信息 -->
						<div v-if="ipInfo.timezone || ipInfo.utc_offset">
							<div text-sm font-medium text-gray-600 mb-2>
								🕐 时区信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="ipInfo.timezone"
									bg-purple-50
									p-3
									rounded-lg>
									<div text-xs text-purple-600>时区</div>
									<div text-sm font-medium text-purple-800>
										{{ ipInfo.timezone }}
									</div>
								</div>
								<div
									v-if="ipInfo.utc_offset"
									bg-purple-50
									p-3
									rounded-lg>
									<div text-xs text-purple-600>UTC偏移</div>
									<div text-sm font-medium text-purple-800>
										{{ ipInfo.utc_offset }}
									</div>
								</div>
							</div>
						</div>

						<!-- 国家信息 -->
						<div
							v-if="
								ipInfo.currency ||
								ipInfo.country_calling_code ||
								ipInfo.country_population
							">
							<div text-sm font-medium text-gray-600 mb-2>
								🏛️ 国家信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="ipInfo.currency"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>货币</div>
									<div text-sm font-medium text-indigo-800>
										{{ ipInfo.currency }} ({{
											ipInfo.currency_name
										}})
									</div>
								</div>
								<div
									v-if="ipInfo.country_calling_code"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>电话区号</div>
									<div text-sm font-medium text-indigo-800>
										{{ ipInfo.country_calling_code }}
									</div>
								</div>
								<div
									v-if="ipInfo.country_population"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>人口</div>
									<div text-sm font-medium text-indigo-800>
										{{
											ipInfo.country_population.toLocaleString()
										}}
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 数据来源 -->
					<div
						v-if="ipInfo.accuracy"
						mt-4
						pt-4
						border-t
						border-gray-200>
						<div flex items-center gap-2 text-sm text-gray-500>
							<div w-2 h-2 bg-blue-500 rounded-full></div>
							<span>数据来源: {{ ipInfo.accuracy }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 查询IP归属标签页 -->
		<div v-if="activeTab === 'custom'">
			<div mb-6>
				<h3 text-xl font-bold text-gray-800>查询IP归属</h3>
				<p text-sm text-gray-500 mt-1>输入任意IP地址获取详细信息</p>
			</div>

			<div flex gap-3 mb-6>
				<c-input-text
					v-model:value="customIp"
					placeholder="请输入要查询的IP地址..."
					flex-1
					@keyup.enter="fetchCustomIpInfo" />
				<c-button
					@click="fetchCustomIpInfo"
					:loading="customLoading"
					:disabled="!customIp.trim()"
					type="primary">
					查询
				</c-button>
			</div>

			<div v-if="customLoading" flex items-center justify-center py-12>
				<n-spin size="large" />
			</div>

			<div v-else-if="customIpInfo" space-y-6>
				<!-- 查询IP地址卡片 -->
				<div
					bg-gradient-to-br
					from-green-500
					to-emerald-600
					rounded-xl
					p-4
					text-white
					shadow-lg>
					<div flex items-center justify-between>
						<div>
							<div text-2xl font-bold font-mono mb-1>
								{{ customIpInfo.ip }}
							</div>
							<div text-green-100 text-sm>查询的IP地址</div>
						</div>
						<c-button
							size="small"
							@click="copyCustomIp"
							type="primary"
							ghost
							class="!bg-white !text-green-600 hover:!bg-green-50">
							复制IP
						</c-button>
					</div>
				</div>

				<!-- 查询结果地理位置卡片 -->
				<div
					v-if="
						customIpInfo.city ||
						customIpInfo.region ||
						customIpInfo.country
					"
					bg-gradient-to-br
					from-purple-500
					to-pink-500
					rounded-xl
					p-4
					text-white
					shadow-lg>
					<div flex items-center justify-between>
						<div>
							<div text-xl font-bold mb-1>
								📍 {{ formatLocation(customIpInfo) }}
							</div>
							<div text-purple-100 text-sm>地理位置信息</div>
						</div>
					</div>
				</div>

				<!-- 查询结果详细信息卡片 -->
				<div bg-white border border-gray-200 rounded-xl p-6 shadow-sm>
					<h4 text-lg font-semibold text-gray-800 mb-4>详细信息</h4>

					<div space-y-4>
						<!-- 基础信息 -->
						<div
							v-if="
								customIpInfo.country ||
								customIpInfo.region ||
								customIpInfo.city
							">
							<div text-sm font-medium text-gray-600 mb-2>
								📍 基础信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="customIpInfo.country"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>国家/地区</div>
									<div text-sm font-medium>
										{{ customIpInfo.country }}
									</div>
								</div>
								<div
									v-if="customIpInfo.region"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>省份/州</div>
									<div text-sm font-medium>
										{{ customIpInfo.region }}
									</div>
								</div>
								<div
									v-if="customIpInfo.city"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>城市</div>
									<div text-sm font-medium>
										{{ customIpInfo.city }}
									</div>
								</div>
								<div
									v-if="customIpInfo.postal"
									bg-gray-50
									p-3
									rounded-lg>
									<div text-xs text-gray-500>邮编</div>
									<div text-sm font-medium>
										{{ customIpInfo.postal }}
									</div>
								</div>
							</div>
						</div>

						<!-- 网络信息 -->
						<div
							v-if="
								customIpInfo.isp ||
								customIpInfo.org ||
								customIpInfo.asn
							">
							<div text-sm font-medium text-gray-600 mb-2>
								🌐 网络信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="customIpInfo.isp"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>运营商</div>
									<div text-sm font-medium text-blue-800>
										{{ customIpInfo.isp }}
									</div>
								</div>
								<div
									v-if="customIpInfo.org"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>组织</div>
									<div text-sm font-medium text-blue-800>
										{{ customIpInfo.org }}
									</div>
								</div>
								<div
									v-if="customIpInfo.asn"
									bg-blue-50
									p-3
									rounded-lg>
									<div text-xs text-blue-600>ASN</div>
									<div text-sm font-medium text-blue-800>
										{{ customIpInfo.asn }}
									</div>
								</div>
							</div>
						</div>

						<!-- 技术信息 -->
						<div
							v-if="customIpInfo.network || customIpInfo.version">
							<div text-sm font-medium text-gray-600 mb-2>
								⚙️ 技术信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="customIpInfo.network"
									bg-green-50
									p-3
									rounded-lg>
									<div text-xs text-green-600>网络段</div>
									<div
										text-sm
										font-medium
										text-green-800
										font-mono>
										{{ customIpInfo.network }}
									</div>
								</div>
								<div
									v-if="customIpInfo.version"
									bg-green-50
									p-3
									rounded-lg>
									<div text-xs text-green-600>IP版本</div>
									<div text-sm font-medium text-green-800>
										{{ customIpInfo.version }}
									</div>
								</div>
							</div>
						</div>

						<!-- 地理坐标 -->
						<div
							v-if="
								customIpInfo.latitude && customIpInfo.longitude
							">
							<div text-sm font-medium text-gray-600 mb-2>
								🗺️ 地理坐标
							</div>
							<div bg-orange-50 p-3 rounded-lg>
								<div text-xs text-orange-600>坐标</div>
								<div
									text-sm
									font-medium
									text-orange-800
									font-mono>
									{{ customIpInfo.latitude.toFixed(4) }},
									{{ customIpInfo.longitude.toFixed(4) }}
								</div>
							</div>
						</div>

						<!-- 时区信息 -->
						<div
							v-if="
								customIpInfo.timezone || customIpInfo.utc_offset
							">
							<div text-sm font-medium text-gray-600 mb-2>
								🕐 时区信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="customIpInfo.timezone"
									bg-purple-50
									p-3
									rounded-lg>
									<div text-xs text-purple-600>时区</div>
									<div text-sm font-medium text-purple-800>
										{{ customIpInfo.timezone }}
									</div>
								</div>
								<div
									v-if="customIpInfo.utc_offset"
									bg-purple-50
									p-3
									rounded-lg>
									<div text-xs text-purple-600>UTC偏移</div>
									<div text-sm font-medium text-purple-800>
										{{ customIpInfo.utc_offset }}
									</div>
								</div>
							</div>
						</div>

						<!-- 国家信息 -->
						<div
							v-if="
								customIpInfo.currency ||
								customIpInfo.country_calling_code ||
								customIpInfo.country_population
							">
							<div text-sm font-medium text-gray-600 mb-2>
								🏛️ 国家信息
							</div>
							<div grid grid-cols-1 md:grid-cols-2 gap-3>
								<div
									v-if="customIpInfo.currency"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>货币</div>
									<div text-sm font-medium text-indigo-800>
										{{ customIpInfo.currency }} ({{
											customIpInfo.currency_name
										}})
									</div>
								</div>
								<div
									v-if="customIpInfo.country_calling_code"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>电话区号</div>
									<div text-sm font-medium text-indigo-800>
										{{ customIpInfo.country_calling_code }}
									</div>
								</div>
								<div
									v-if="customIpInfo.country_population"
									bg-indigo-50
									p-3
									rounded-lg>
									<div text-xs text-indigo-600>人口</div>
									<div text-sm font-medium text-indigo-800>
										{{
											customIpInfo.country_population.toLocaleString()
										}}
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 数据来源 -->
					<div
						v-if="customIpInfo.accuracy"
						mt-4
						pt-4
						border-t
						border-gray-200>
						<div flex items-center gap-2 text-sm text-gray-500>
							<div w-2 h-2 bg-blue-500 rounded-full></div>
							<span>数据来源: {{ customIpInfo.accuracy }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</c-card>
</template> 